<template>
  <uni-nav-bar title="考勤记录" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
    :style="{ height: pageHeight + 'px' }">
    <view class="package_sale" v-for="(item,index) in attendanList" :key="item.id"
      :style="{marginTop:index==0?'0px':'15rpx 0px'}">
      <view class="space-between">
        <view>{{item.type_text}}</view>
        <view>{{item.status_text}}</view>
      </view>
      <view class="top" style="font-size:26rpx;">申请时间：{{item.addtime}}</view>
      <view class="top" style="font-size:26rpx;" v-if="item.updatetime">审批时间：{{item.updatetime}}</view>
      <view class="top" style="margin:10rpx 0px;">{{item.des}}</view>
      <view class="top">{{item.admin_name}}审批</view>
    </view>
    <Popu v-if="attendanList.length<1" :pageHeight="pageHeight" text="暂无考勤记录"></Popu>
  </scroll-view>
</template>
<script setup lang="ts">
  import { navBack } from '@/utils/navigator';
  import { toPublish } from '@mqtt';
  import { ref } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import { showLoading } from '@/utils/prompt';
  import { getWorkStatusLog } from '@/gql/earthPushing/attendance';
  import Popu from '@c/earthPushing/common/popu.vue';
  import { getDriverID } from '@/stores/driverID';
  const staff_id = getDriverID();
  const attendanList = ref([])
  const lastPage = ref(1);
  const currentPage = ref(1);
  const pageHeight = ref()
  const month = ref()
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = res.windowHeight - 45;
    },
  });
  onLoad((pearm) => {
    month.value = pearm.month
    init()
  })
  function init() {
    showLoading()
    const payload = {
      query: getWorkStatusLog,
      variables: {
        page: currentPage.value,
        staff_id,
        month:month.value
      },
    };
    toPublish(
      'ql/staff/getWorkStatusLog',
      payload,
      (obj : any) => {
        const { getWorkStatusLog } = obj.data;
        attendanList.value = [...attendanList.value, ...getWorkStatusLog.list];
        lastPage.value = getWorkStatusLog.lastpage;
      }
    );
  }
  /**
   * 加载更多
   */
  function loadMore() {
    if (currentPage.value < lastPage.value) {
      currentPage.value++;
      init();
    }
  }
</script>

<style scoped lang="less">
  .top {
    margin-top: 5rpx;
  }
</style>